<template>
    <div>
        <back title="标题"></back>
        <div class="container">
            <div class="overImg">
                <img :src="info.overImg">
                <div class="title">
                    <h3>{{ info.title }}</h3>
                    <span>{{ info.createTime }}</span>
                    <label class="iconfont icon-yanjing"></label>
                    <label>{{ info.browseCount }}</label>
                    <label class="iconfont icon-thumbup thumbup"></label>
                    <label>{{ info.likesCount }}</label>
                </div>
            </div>
            <div class="content">
                <rich-text :nodes="info.content"></rich-text>
            </div>
            <div class="right d-flex space-between">
                <div class="share flex-1">
                    <button
                        size="mini"
                        plain
                        open-type="share"
                    >
                        <icon class="iconfont icon-fenxiang"></icon>
                        <p>分享</p>
                    </button>
                </div>
                <div
                    class="like flex-1"
                    @click="like"
                    v-if="ifShow"
                >
                    <icon class="iconfont icon-dianzan1"></icon>
                    <p>点赞</p>
                </div>
                <div
                    class="cancleLike flex-1"
                    @click="cancleLike"
                    v-else
                >
                    <icon class="iconfont icon-dianzan"></icon>
                    <p>+1</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { formatTime } from "@/utils";

export default {
    data() {
        return {
            id: "",
            info: {},
            ifShow: true
        };
    },
    onLoad(e) {
        this.id = e.id;
        this.getDetail(e.id);
        this.ifLikeList();
    },
    onUnload() {
        this.info = {};
    },
    onShareAppMessage() {
        return {
            title: "分享内容",
            path: "/pages/detail/main?id=" + this.id
        };
    },
    methods: {
        // 获取文章详情
        getDetail(id) {
            this.$http
                .post({
                    url: this.$services.GET_CONTENT_DETAIL,
                    data: {
                        appid: "wxac10e0b6b389fe20",
                        id
                    }
                })
                .then(res => {
                    this.info = res.miniAppletContentVo;
                    this.info.createTime = formatTime(this.info.createTime);
                });
        },
        // 判断列表是否被点过赞
        ifLikeList() {
            const likeList = wx.getStorageSync("likeList") || [];
            this.ifShow = !likeList.includes(this.id);
        },
        // 点赞
        like() {
            this.$http
                .post({
                    url: this.$services.LIKE_VIEW,
                    data: {
                        appid: "wxac10e0b6b389fe20",
                        id: this.id,
                        likeState: 1
                    }
                })
                .then(res => {
                    this.ifShow = false;
                    this.getDetail(this.id);
                    const likeList = wx.getStorageSync("likeList") || [];
                    if (!likeList.includes[this.id]) {
                        likeList.push(this.id);
                        wx.setStorageSync("likeList", likeList);
                    }
                });
        },
        // 取消点赞
        cancleLike() {
            this.$http
                .post({
                    url: this.$services.LIKE_VIEW,
                    data: {
                        appid: "wxac10e0b6b389fe20",
                        id: this.id,
                        likeState: 2
                    }
                })
                .then(res => {
                    this.ifShow = true;
                    this.getDetail(this.id);
                    const likeList = wx.getStorageSync("likeList") || [];
                    if (likeList.includes(this.id)) {
                        const index = likeList.indexOf(this.id);
                        likeList.splice(index, 1);
                        wx.setStorageSync("likeList", likeList);
                    }
                });
        }
    }
};
</script>
<style lang="scss" scoped>
.container {
    padding-top: 60px;
    .overImg {
        position: relative;
        img {
            width: 100%;
        }
        .title {
            position: absolute;
            color: #fff;
            bottom: 25px;
            left: 10px;
            font-size: 13px;
            h3 {
                font-size: 25px;
                margin-bottom: 10px;
            }
            span {
                margin-right: 15px;
            }
            label {
                margin: 0 3px;
            }
            .thumbup {
                margin-left: 10px;
            }
        }
    }
    .content {
        padding: 0 10px;
        // img {
        //     width: 30%;
        // }
    }
    .right {
        width: 100px;
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 12px;
        position: fixed;
        top: 45%;
        right: 15px;
        background: #fff;
        border: 1px solid #eee;
        box-shadow: 5px 5px 5px rgba($color: #000000, $alpha: 0.2);
        text-align: center;
        .share {
            border-right: 1px solid #eee;
            button[plain] {
                border: 0;
                padding: 0;
                font-size: 12px;
                line-height: 16px;
            }
            .iconfont {
                font-weight: bold;
            }
        }
        .cancleLike {
            color: #f00;
        }
    }
}
</style>
